<!DOCTYPE html>
<html lang="en-us">
  <head>
    
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.84.4 with theme Tranquilpeak 0.4.8-BETA">
<meta name="author" content="Firstname Lastname">
<meta name="keywords" content="">
<meta name="description" content="And here is the image gallery!">


<meta property="og:description" content="And here is the image gallery!">
<meta property="og:type" content="article">
<meta property="og:title" content="Image gallery showcase">
<meta name="twitter:title" content="Image gallery showcase">
<meta property="og:url" content="https://zz.gitee.io/2013/02/image-gallery-showcase/">
<meta property="twitter:url" content="https://zz.gitee.io/2013/02/image-gallery-showcase/">
<meta property="og:site_name" content="Hugo tranquilpeak theme">
<meta property="og:description" content="And here is the image gallery!">
<meta name="twitter:description" content="And here is the image gallery!">
<meta property="og:locale" content="en-us">

  
    <meta property="article:published_time" content="2013-02-18T00:00:00">
  
  
    <meta property="article:modified_time" content="2013-02-18T00:00:00">
  
  
  
    
      <meta property="article:section" content="tranquilpeak">
    
      <meta property="article:section" content="features">
    
  
  
    
      <meta property="article:tag" content="image gallery">
    
  


<meta name="twitter:card" content="summary">







  <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/image-gallery-showcase/city-140.jpg">
  <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/image-gallery-showcase/city-140.jpg">



  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg">
  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg">
  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg">
  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27.jpg">
  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg">
  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26.jpg">
  
    <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg">
    <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg">
  



  <meta property="og:image" content="https://www.gravatar.com/avatar/d09dc2d7aa5c467519e8af89f7b3d94c?s=640">
  <meta property="twitter:image" content="https://www.gravatar.com/avatar/d09dc2d7aa5c467519e8af89f7b3d94c?s=640">


    <title>Image gallery showcase</title>

    <link rel="icon" href="https://zz.gitee.io/favicon.png">
    

    

    <link rel="canonical" href="https://zz.gitee.io/2013/02/image-gallery-showcase/">

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css" integrity="sha256-vuXZ9LGmmwtjqFX1F+EKin1ThZMub58gKULUyf0qECk=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.css" integrity="sha256-SEa4XYAHihTcEP1f5gARTB2K26Uk8PsndQYHQC1f4jU=" crossorigin="anonymous" />
    
    
    <link rel="stylesheet" href="https://zz.gitee.io/css/style-twzjdbqhmnnacqs0pwwdzcdbt8yhv8giawvjqjmyfoqnvazl0dalmnhdkvp7.min.css" />
    
    

    
      
    
    
  </head>

  <body>
    <div id="blog">
      <header id="header" data-behavior="4">
  <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
  <div class="header-title">
    <a class="header-title-link" href="https://zz.gitee.io/">Hugo tranquilpeak theme</a>
  </div>
  
    
      <a class="header-right-picture "
         href="https://zz.gitee.io/#about">
    
    
    
      
        <img class="header-picture" src="https://www.gravatar.com/avatar/d09dc2d7aa5c467519e8af89f7b3d94c?s=90" alt="Author&#39;s picture" />
      
    
    </a>
  
</header>

      <nav id="sidebar" data-behavior="4">
  <div class="sidebar-container">
    
      <div class="sidebar-profile">
        <a href="https://zz.gitee.io/#about">
          <img class="sidebar-profile-picture" src="https://www.gravatar.com/avatar/d09dc2d7aa5c467519e8af89f7b3d94c?s=110" alt="Author&#39;s picture" />
        </a>
        <h4 class="sidebar-profile-name">Firstname Lastname</h4>
        
          <h5 class="sidebar-profile-bio">Super bio with markdown support <strong>COOL</strong></h5>
        
      </div>
    
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://zz.gitee.io/">
    
      <i class="sidebar-button-icon fa fa-lg fa-home"></i>
      
      <span class="sidebar-button-desc">Home</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://zz.gitee.io/categories">
    
      <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
      
      <span class="sidebar-button-desc">Categories</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://zz.gitee.io/tags">
    
      <i class="sidebar-button-icon fa fa-lg fa-tags"></i>
      
      <span class="sidebar-button-desc">Tags</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://zz.gitee.io/archives">
    
      <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
      
      <span class="sidebar-button-desc">Archives</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://zz.gitee.io/#about">
    
      <i class="sidebar-button-icon fa fa-lg fa-question"></i>
      
      <span class="sidebar-button-desc">About</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://github.com/kakawait" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-github"></i>
      
      <span class="sidebar-button-desc">GitHub</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://stackoverflow.com/users/636472/kakawait" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-stack-overflow"></i>
      
      <span class="sidebar-button-desc">Stack Overflow</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://zz.gitee.io/index.xml">
    
      <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
      
      <span class="sidebar-button-desc">RSS</span>
    </a>
  </li>


    </ul>
  </div>
</nav>

      

      <div id="main" data-behavior="4"
        class="
               hasCoverMetaIn
               ">
        <article class="post" itemscope itemType="http://schema.org/BlogPosting">
          
          
            <div class="post-header main-content-wrap text-left">
  
    <h1 class="post-title" itemprop="headline">
      Image gallery showcase
    </h1>
  
  
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2013-02-18T00:00:00Z">
        
  February 18, 2013

      </time>
    
    
  
  
    <span>in</span>
    
      <a class="category-link" href="https://zz.gitee.io/categories/tranquilpeak">tranquilpeak</a>, 
    
      <a class="category-link" href="https://zz.gitee.io/categories/features">features</a>
    
  

  </div>

</div>
          
          <div class="post-content markdown" itemprop="articleBody">
            <div class="main-content-wrap">
              <p>And here is the image gallery!</p>
              
  
  
  
    <div class="image-gallery">
      <div class="image-gallery-metabar">
        <span>Gallery 7 images</span>
      </div>
      <div class="image-gallery-photos image-gallery-photos--thumbnail">
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="&#34;Mercedes&#34;" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-31.jpg" itemprop="image">
            </a>
          </div>
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="&#34;Lamborghini&#34;" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-9.jpg" itemprop="image">
            </a>
          </div>
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="&#34;Nissan&#34;" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-10.jpg" itemprop="image">
            </a>
          </div>
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="&#34;Mercedes&#34;" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-27.jpg" itemprop="image">
            </a>
          </div>
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="&#34;Ferrari&#34;" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-4.jpg" itemprop="image">
            </a>
          </div>
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="&#34;Lamborghini&#34;" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-26.jpg" itemprop="image">
            </a>
          </div>
        
          
          
          <div class="photo-box">
            <a class="photo-box-inner fancybox" data-fancybox-group="gallery-bec4f88e9f95abbc102d9385a659684b"
               title="" href="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg">
              <img class="photo" src="//d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-18.jpg" itemprop="image">
            </a>
          </div>
        
      </div>
    </div>
    

            </div>
          </div>
          <div id="post-footer" class="post-footer main-content-wrap">
            
              
                
                
                  <div class="post-footer-tags">
                    <span class="text-color-light text-small">TAGGED IN</span><br/>
                    
  <a class="tag tag--primary tag--small" href="https://zz.gitee.io/tags/image-gallery/">image gallery</a>

                  </div>
                
              
            
            <div class="post-actions-wrap">
  
      <nav >
        <ul class="post-actions post-action-nav">
          
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://zz.gitee.io/2013/10/chinese-test/" data-tooltip="中文測試">
              
                  <i class="fa fa-angle-left"></i>
                  <span class="hide-xs hide-sm text-small icon-ml">NEXT</span>
                </a>
            </li>
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://zz.gitee.io/2013/01/japanese-test/" data-tooltip="日本語テスト">
              
                  <span class="hide-xs hide-sm text-small icon-mr">PREVIOUS</span>
                  <i class="fa fa-angle-right"></i>
                </a>
            </li>
          
        </ul>
      </nav>
    <ul class="post-actions post-action-share" >
      
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https://zz.gitee.io/2013/02/image-gallery-showcase/">
              <i class="fa fa-facebook-official"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://twitter.com/intent/tweet?text=https://zz.gitee.io/2013/02/image-gallery-showcase/">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://plus.google.com/share?url=https://zz.gitee.io/2013/02/image-gallery-showcase/">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        
      
      
        <li class="post-action">
          <a class="post-action-btn btn btn--default" href="#disqus_thread">
            <i class="fa fa-comment-o"></i>
          </a>
        </li>
      
      <li class="post-action">
        
          <a class="post-action-btn btn btn--default" href="#">
        
          <i class="fa fa-list"></i>
        </a>
      </li>
    </ul>
  
</div>

            
              
                <div id="disqus_thread">
  <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
              
            
          </div>
        </article>
        <footer id="footer" class="main-content-wrap">
  <span class="copyrights">
    &copy; 2021 Firstname Lastname. All Rights Reserved
  </span>
</footer>

      </div>
      <div id="bottom-bar" class="post-bottom-bar" data-behavior="4">
        <div class="post-actions-wrap">
  
      <nav >
        <ul class="post-actions post-action-nav">
          
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://zz.gitee.io/2013/10/chinese-test/" data-tooltip="中文測試">
              
                  <i class="fa fa-angle-left"></i>
                  <span class="hide-xs hide-sm text-small icon-ml">NEXT</span>
                </a>
            </li>
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://zz.gitee.io/2013/01/japanese-test/" data-tooltip="日本語テスト">
              
                  <span class="hide-xs hide-sm text-small icon-mr">PREVIOUS</span>
                  <i class="fa fa-angle-right"></i>
                </a>
            </li>
          
        </ul>
      </nav>
    <ul class="post-actions post-action-share" >
      
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https://zz.gitee.io/2013/02/image-gallery-showcase/">
              <i class="fa fa-facebook-official"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://twitter.com/intent/tweet?text=https://zz.gitee.io/2013/02/image-gallery-showcase/">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://plus.google.com/share?url=https://zz.gitee.io/2013/02/image-gallery-showcase/">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        
      
      
        <li class="post-action">
          <a class="post-action-btn btn btn--default" href="#disqus_thread">
            <i class="fa fa-comment-o"></i>
          </a>
        </li>
      
      <li class="post-action">
        
          <a class="post-action-btn btn btn--default" href="#">
        
          <i class="fa fa-list"></i>
        </a>
      </li>
    </ul>
  
</div>

      </div>
      <div id="share-options-bar" class="share-options-bar" data-behavior="4">
  <i id="btn-close-shareoptions" class="fa fa-close"></i>
  <ul class="share-options">
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fzz.gitee.io%2F2013%2F02%2Fimage-gallery-showcase%2F">
          <i class="fa fa-facebook-official"></i><span>Share on Facebook</span>
        </a>
      </li>
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fzz.gitee.io%2F2013%2F02%2Fimage-gallery-showcase%2F">
          <i class="fa fa-twitter"></i><span>Share on Twitter</span>
        </a>
      </li>
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://plus.google.com/share?url=https%3A%2F%2Fzz.gitee.io%2F2013%2F02%2Fimage-gallery-showcase%2F">
          <i class="fa fa-google-plus"></i><span>Share on Google&#43;</span>
        </a>
      </li>
    
  </ul>
</div>
<div id="share-options-mask" class="share-options-mask"></div>
    </div>
    
    <div id="about">
  <div id="about-card">
    <div id="about-btn-close">
      <i class="fa fa-remove"></i>
    </div>
    
      <img id="about-card-picture" src="https://www.gravatar.com/avatar/d09dc2d7aa5c467519e8af89f7b3d94c?s=110" alt="Author&#39;s picture" />
    
    <h4 id="about-card-name">Firstname Lastname</h4>
    
      <div id="about-card-bio">Super bio with markdown support <strong>COOL</strong></div>
    
    
      <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        Your job title
      </div>
    
    
      <div id="about-card-location">
        <i class="fa fa-map-marker"></i>
        <br/>
        France
      </div>
    
  </div>
</div>

    

    
  
    
      <div id="cover" style="background-image:url('https://zz.gitee.io/images/cover.jpg');"></div>
    
  


    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js" integrity="sha256-GEAnjcTqVP+vBp3SSc8bEDQqvWAZMiHyUSIorrWwH50=" crossorigin="anonymous"></script>


<script src="https://zz.gitee.io/js/script-pcw6v3xilnxydl1vddzazdverrnn9ctynvnxgwho987mfyqkuylcb1nlt.min.js"></script>


<script lang="javascript">
window.onload = updateMinWidth;
window.onresize = updateMinWidth;
document.getElementById("sidebar").addEventListener("transitionend", updateMinWidth);
function updateMinWidth() {
  var sidebar = document.getElementById("sidebar");
  var main = document.getElementById("main");
  main.style.minWidth = "";
  var w1 = getComputedStyle(main).getPropertyValue("min-width");
  var w2 = getComputedStyle(sidebar).getPropertyValue("width");
  var w3 = getComputedStyle(sidebar).getPropertyValue("left");
  main.style.minWidth = `calc(${w1} - ${w2} - ${w3})`;
}
</script>

<script>
$(document).ready(function() {
  hljs.configure({ classPrefix: '', useBR: false });
  $('pre.code-highlight > code, pre > code').each(function(i, block) {
    if (!$(this).hasClass('codeblock')) {
      $(this).addClass('codeblock');
    }
    hljs.highlightBlock(block);
  });
});
</script>


  
    
      <script>
        var disqus_config = function () {
          this.page.url = 'https:\/\/zz.gitee.io\/2013\/02\/image-gallery-showcase\/';
          
            this.page.identifier = '\/2013\/02\/image-gallery-showcase\/'
          
        };
        (function() {
          
          
          if (window.location.hostname == "localhost") {
            return;
          }
          var d = document, s = d.createElement('script');
          var disqus_shortname = 'hugo-tranquilpeak-theme';
          s.src = '//' + disqus_shortname + '.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      </script>
    
  




    
  </body>
</html>

